<!-- 
@descrition: 树节点下的每一项用户 这里和树没有关系。只展示4级，因为我的下标是从0开始的，所以，是小于等于3
@auth: '' 
-->
<template>
	<view class="box" :class="{'box-0': !level}" v-if="level <= 3">
		<!-- end -->
		<view class="header">
			<view class="sub-user-item" @click="expandChildren">
				
				<view class="col-1"> 
					<text v-if="level" :style="{
						'margin-left': (level * 20) + 'rpx'
					}">├ &nbsp;</text>
					<text>{{ row.nickname }}</text>
				</view>
			
				<view class="col-2">
					<text>- {{ row.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
					<text class="count base-color">({{ row.num }})</text>
				</view>
				
			
				<view class="col-3">
					<text class="role_name base-color">{{ row.level_text }}</text>
					<view class="arrow-wrap">
						<view v-if="row.visibleChildren">
							<u-icon name="arrow-up" size="20"></u-icon>
						</view>
						<view v-else>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- end -->
		<view class="body" v-if="row.children && row.children.length && row.visibleChildren">
			<SubUserItem v-for="(subItem, subIndex) in row.children" :key="subIndex" :row="subItem" :level="level + 1">
			</SubUserItem>
		</view>
	</view>
	
</template>

<script>
/**
	 * @descrition: '' 
	 * @auth: '' 
	 */
import SubUserItem from './SubUserItem.vue';
import request from "@/utils/request";
export default {
	name: 'SubUserItem',
	components: {
		SubUserItem
	},
	props: {
		level: {
			type: Number,
			default: 0
		},
		row: {
			type: Object,
			default() {
				return {
					"user_id": 29893,
					"level_text": "达人",
					"real_name": "",
					"nickname": "138004",
					"headimgurl": "",
					"mobile": "13800138004",
					"num": 11,
					"visibleChildren": false,
					'children': []
				}
			}
		}
	},
	data() {
		return {

		}
	},
	computed: {},
	watch: {},
	created() { },
	mounted() { },
	methods: {
		expandChildren() {
			this.row.visibleChildren = !this.row.visibleChildren
			if (this.level > 3 || !this.row.num) {
				return
			}
			this.getJsonData(this.row.id)
			
		},
		getJsonData(pid) {
			const vm = this
			uni.showLoading({
				title: '加载中'
			});
			request.get("/user/getUnderUserlist", {
				params : {
					pid: pid
				}
			}).then(res => {
				const list = res.list.map(item => {
					return {
						...item,
						children: []
					}
				})
				if (vm.row.children) {
					vm.row.children = []
				}
				vm.row.children.push(...list)
			}).finally(() => {
				uni.hideLoading();
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	$font-color-dark: #ff8200 ;
	.box{
		width: 100%;
		background-color: #ffffff;
		// padding: 0 20rpx;
		// padding-left: 20rpx;
		margin-bottom: 20rpx;
		// box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.04);
		border-radius: 20rpx;
		overflow: hidden;
		// border:1px solid #ddd;
	}
	.box-0 {
		box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.04);
	}
	.sub-user-item {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		// margin: 20rpx 0;
		margin-left: 20rpx;
		// border-bottom:1rpx solid #ddd;
		background-color: #ffffff;
		// box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.04);
		
	}
	.count{
		color: $font-color-dark;
		font-size: 28rpx;
		margin-left: 5rpx;
	}
	.col-3 {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// width: 100rpx;
	}
	.role_name{
		line-height: 40rpx;
		font-size: 26rpx;
		top: 25rpx;
		right: 80rpx;
		border: 1rpx solid $font-color-dark;
		border-radius: 10rpx;
		padding: 2rpx 10rpx;
		color: $font-color-dark;
	}
	.arrow-wrap{
		
		margin-left: 20rpx;
	}
</style>